<template>
  <div class="" v-title data-title="内控平台-风控矩阵-风控评价">
    <a-back-top></a-back-top>
    <index-header headLine="风控评价" hideBack></index-header>
    <div class="content info-main">
      <header>
        <h1>风控评价</h1>
      </header>
      <h2><a-icon type="file-done" />风险点信息</h2>
      <a-descriptions bordered size="small" class="internal">
        <a-descriptions-item label="法人公司">
          {{form.companyName }}
        </a-descriptions-item>
        <a-descriptions-item label="考核经营体">
          {{form.manageName}}
        </a-descriptions-item>
        <a-descriptions-item label="业务模块">
          {{form.businessModelName}}
        </a-descriptions-item>
        <a-descriptions-item label="L1">
          {{form.incRisk.level1Name}}
        </a-descriptions-item>
        <a-descriptions-item label="L2">
           {{form.incRisk.level2Name}}
        </a-descriptions-item>
        <a-descriptions-item label="风险点编号">
          {{form.incRisk.riskNo}}
        </a-descriptions-item>
        <a-descriptions-item label="风险因素">
        {{form.incRisk.riskFactor}}
        </a-descriptions-item>
        <a-descriptions-item label="风险事件">
          {{form.incRisk.riskEvent}}
        </a-descriptions-item>
        <a-descriptions-item label="风险类型">
          {{form.incRisk.riskTypeName}}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider />
      <template>
        <div class="mt20">
          <div class="tabs">
            <div v-for="item in tabsList" :key="item.key" :class="{ active: item.key == tabsId }" @click="handChange(item)">
              <span>{{ item.name }}</span>
            </div>
          </div>
          <section class="section-bg">
            <component :is="activeTab"></component>
          </section>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import indexHeader from '@/views/components/indexHeader';
import { getRiskAction, postRiskAction } from '@/api/manage';
import { CommonMixis } from '@/mixins/CommonMixis';
import DataColBy1 from './detAssessList/dataColBy1';
import DataColBy2 from './detAssessList/dataColBy2';
import DataColBy3 from './detAssessList/dataColBy3';
export default {
  name: 'MatrixLssueInfo',
  mixins: [CommonMixis],
  components: {
    indexHeader,DataColBy1,DataColBy2,DataColBy3
  },
  provide(){
    return {parentThis :  this}
  },
  data() {
    return {
      form:{
        companyName:'',
      },
      id: this.$route.query.id,
      tabsList: [
        { name: '业务自评', key: 1 },
        { name: '监管部门评价', key: 2 },
        { name: '内控总评', key: 3 },
      ],
      pagination: {
        current: 1,
        pageSize: 10,
        pageSizeOptions: ['10', '30', '50'],
        showTotal: (total, range) => {
          return range[0] + '-' + range[1] + ' 共' + total + '条';
        },
        total: 0,
        loading: false,
      },
      url:{
        riskList:'/incRiskSpread/page',
        // list: '/incEvaluateActivity/optPage',
        // riskList:'/incRiskSpread/page',
      },
      tabsId: 1,
      activeTab: 'DataColBy1'
    };
  },
  mounted() {

    let riskId  = this.$route.query.id
    let companyCode = this.$route.query.companyCode;
    let manageCode = this.$route.query.manageCode;
    let businessModelId = this.$route.query.businessModelId;
    this.$set(this.pagination , 'riskId' , riskId)
    this.$set(this.pagination , 'companyCode' ,companyCode)
    this.$set(this.pagination , 'manageCode' ,manageCode)
    this.$set(this.pagination , 'businessModelId' ,businessModelId)
    // this.getInitData(this.url.list);
    this.initData();
  },
  methods: {

    initData(){
      getRiskAction(this.url.riskList,{
        pageNo: 1,
        pageSize: 2,
        riskId:this.pagination.riskId,
        companyCode: this.pagination.companyCode,
        businessModelId: this.pagination.businessModelId,
        manageCode: this.pagination.manageCode,
      })
              .then(res => {
                const result = res.data;
                if (res.code === 0) {
                  this.form = result.records[0];
                } else {
                  this.$message.error('查询列表失败');
                }
                this.pagination.loading = false;
              });
    } ,
    handChange(item) {
      this.tabsId = item.key;
      this.activeTab = `DataColBy${this.tabsId}`
    },
  }
};
</script>
<style lang="scss" scoped>
@import '@/styles/riskForm.scss';
@import '@/styles/riskDetInfo.scss';
.mt20{
  margin-top: 20px;
}
.info-2 ::v-deep .ant-descriptions-item{display: flex !important;}
.info-main .info-2.ant-descriptions{margin: -20px 20px 20px;}
.section-bg{
  background-color: #F4F5F9;
  padding: 20px;
  /deep/ .ant-table{background-color: #fff;}
}
.tabs {
    display: flex;
    > div {
      height: 40px;
      color: #666;
      padding: 0 30px;
      line-height: 38px;
      cursor: pointer;
      font-size: 15px;
      &.active {
        background: #fff;
        position: relative;
        color: #1890ff;
        border-bottom: none;
        &:after {
          content: '';
          position: absolute;
          z-index: 1;
          width: 100%;
          height: 4px;
          background: #1890ff;
          left: 0;
          bottom: -2px;
        }
      }
      &:hover {
        color: #197ddb;
      }
    }
    + section {
      margin-top: 0;
    }
  }
</style>
